import { ModalForm, ProDescriptions } from '@ant-design/pro-components';
import type { AbnormalAppealTableItem } from '../types.d';
import { AppealType, AbnormalStatus, NotifyWay } from '../types.d';

const AppealDetailModal = (props: {
  close: () => void;
  visible: boolean;
  appeal: AbnormalAppealTableItem;
}) => {
  const { close, visible, appeal } = props;
  return (
    <ModalForm
      title="申诉详情"
      width="65vw"
      submitter={false}
      visible={visible}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          close();
        },
      }}
    >
      <ProDescriptions
        dataSource={appeal}
        column={3}
        columns={[
          {
            title: '申诉单号',
            dataIndex: 'no',
          },
          {
            title: '申诉类型',
            dataIndex: 'type',
            valueEnum: {
              [AppealType.COLLECTOR]: '人员投诉',
              [AppealType.ORDER_EXCEPTION]: '订单异常',
              [AppealType.OTHER]: '其他',
            },
          },
          {
            title: '申诉状态',
            dataIndex: 'status',
            valueEnum: {
              [AbnormalStatus.WAITING]: { text: '待处理', status: 'processing' },
              [AbnormalStatus.HANDLED]: { text: '已处理', status: 'success' },
              [AbnormalStatus.CLOSED]: { text: '已关闭', status: 'default' },
            },
          },
          {
            title: '申诉时间',
            dataIndex: 'appealTime',
            valueType: 'dateTime',
          },
          {
            title: '用户名称',
            dataIndex: 'userName',
          },
          {
            title: '申诉账号',
            dataIndex: 'phone',
          },
          {
            title: '用户车牌',
            dataIndex: 'plateNumber',
          },
          {
            title: '通知方式',
            dataIndex: 'notifyWay',
            valueEnum: {
              [NotifyWay.MESSAGE]: '短信通知',
              [NotifyWay.EMAIL]: '邮件通知',
              [NotifyWay.NONE]: '不通知',
            },
          },
          {
            title: '通知手机',
            dataIndex: 'userPhone',
            hideInDescriptions: true,
          },
          {
            title: '用户邮箱',
            dataIndex: 'userEmail',
          },
          {
            title: '订单编号',
            dataIndex: 'orderNo',
          },
          {
            title: '收费工号',
            dataIndex: 'jobNo',
          },
          {
            title: '路段名称',
            dataIndex: 'parkingLotName',
          },
          {
            title: '泊位编号',
            dataIndex: 'spotId',
          },
          {
            title: '处理账号',
            dataIndex: 'handleAccount',
          },
          { title: '处理时间', dataIndex: 'handleTime', valueType: 'dateTime' },
          {
            title: '问题描述',
            dataIndex: 'description',
            span: 3,
          },
          {
            title: '处理结果',
            dataIndex: 'result',
            span: 3,
          },
        ]}
      />
    </ModalForm>
  );
};

export default AppealDetailModal;
